<template>
  <FrontSideTreeTable
    treeDataUrl="/sys/menu/getList"
    tableDataUrl="/sys/menu/getList"
    addUrl="/sys/menu/add"
    editUrl="/sys/menu/edit"
    deleteUrl="/sys/menu/delete"
    treeTitle="菜单"
    :tableTitle="selectedNode.name+'菜单列表'"
    searchHint="根据菜单名或路径查找"
    :searchProps="searchProps"
    :columns="columns"
    :form="form"
    :rules="rules"
    @onTableCreated="onTableCreated"
    @onNodeClick="onNodeClick"
    @beforeAdd="beforeAdd"
    @beforeEdit="beforeEdit">
    <template slot="form">
      <el-form-item label="上一级">
        <el-select v-model="form.parentId" style="width:100%" placeholder="请选择上一级，输入文字可搜索" filterable clearable>
          <el-option v-for="item of dataList" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="菜单名称" prop="name">
        <el-input v-model="form.name" placeholder="输入菜单名称"></el-input>
      </el-form-item>
      <el-form-item label="顺序号" prop="sortNo">
        <el-input type="number" v-model.number="form.sortNo" placeholder="输入菜单排序号"></el-input>
      </el-form-item>
      <el-form-item label="路径" prop="url">
        <el-input v-model="form.url" placeholder="使用绝对路径，如/bridge/bridgeInfo等"></el-input>
      </el-form-item>
      <el-form-item label="图标">
        <i :class="form.icon"></i>
        <el-button type="text" @click="isIconSelectorVisible=true">选择</el-button>
      </el-form-item>
      <el-form-item label="备注">
        <el-input type="textarea" v-model="form.notes"></el-input>
      </el-form-item>
    </template>
    <!--   图标选择对话框  -->
    <div slot="dialog">
      <IconSelector :isVisible="isIconSelectorVisible" @select="selectIcon" @close="isIconSelectorVisible=false"></IconSelector>
    </div>
  </FrontSideTreeTable>
</template>

<script>
  import FrontSideTreeTable from "../../template/FrontSideTreeTable.vue"
  import IconSelector from "../../template/IconSelector.vue"
  import {urlValidator, intValidator} from "../../../assets/js/utils/ValidateUtils"
  import {clearFields} from "../../../assets/js/utils/ObjectUtils"

  //旧的菜单名，判断是否编辑时修改了菜单名
  let oldMenuName = "";

  export default {
    name: "MenuManage",
    data() {
      //名称重复校验
      let nameValidator = (rule, value, callback)=>{
        //排除修改菜单的情况
        if(value === oldMenuName) {
          callback();
        }else {
          if(this.dataList.some(item=>item.name === value)) {
            callback(new Error("菜单名重复"));
          } else {
            callback();
          }
        }
      };

      return {
        //数据集合
        dataList: [],

        //表单对象
        form: {
          parentId: "",
          name:"",
          url:"",
          icon:"",
          notes:"",
          sortNo:0
        },

        //图标选择对话框
        isIconSelectorVisible:false,

        //表格所包含的列
        columns:[
          {prop:"sortNo",label:"顺序号",width:"80"},
          {prop:"name",label:"菜单名称"},
          {prop:"url",label:"路径"}
        ],

        //查询的属性名
        searchProps: ["name"],

        //表单校验规则
        rules: {
          name:[
            {required:true, message:"请输入菜单名称", trigger:"blur"},
            {validator: nameValidator, trigger:"blur"}
          ],
          url:[
            {validator:urlValidator, trigger:"blur"}
          ],
          sortNo:[
            {validator:intValidator, trigger:"blur"}
          ]
        },

        selectedNode:{name:""}
      }
    },

    methods:{
      //选择图标
      selectIcon(icon) {
        this.isIconSelectorVisible = false;
        this.form.icon = icon;
      },
      onTableCreated(dataList) {
        this.dataList = dataList;
      },
      onNodeClick(data) {
        this.selectedNode = data;
      },
      beforeAdd() {
        //初始化所有的表单参数
        oldMenuName = "";
        this.form = {};
        this.form.parentId = this.selectedNode.id;
      },
      beforeEdit(data) {
        //初始化所有的表单参数
        oldMenuName = data.name;
        this.form = {...data};
      }
    },

    //用到的组件
    components:{IconSelector, FrontSideTreeTable}
  }
</script>



// WEBPACK FOOTER //
// MenuManagement.vue?d3069ca6
